<template>
  <div id="app">
    <XhTitleVue @addContent="addContent"></XhTitleVue>
    <XhMainVue :list="list" @delId="del"></XhMainVue>
    <XhFooterVue :len="list.length" @clearAll="clearAll"></XhFooterVue>
  </div>
</template>

<script>
import XhFooterVue from "./components/XhFooter.vue";
import XhMainVue from "./components/XhMain.vue";
import XhTitleVue from "./components/XhTitle.vue";

export default {
  components: {
    XhFooterVue,
    XhMainVue,
    XhTitleVue,
  },
  data() {
    return {
      list: JSON.parse(localStorage.getItem("list")) || [
        { id: 1, content: "唱" },
        { id: 2, content: "跳" },
        { id: 3, content: "rap" },
        { id: 4, content: "篮球" },
      ],
    };
  },
  methods: {
    addContent(value) {
      let id = Date.now() + "";
      this.list.unshift({ id: id, content: value });
    },
    del(value) {
      let res = this.list.filter((item) => item.id != value);
      this.list = res;
    },
    clearAll(value) {
      this.list = value;
    },
  },
  watch: {
    list: {
      deep: true,
      handler(newValue) {
        localStorage.setItem("list", JSON.stringify(newValue));
      },
    },
  },
};
</script>

<style>
</style>